<template>
  <div class="home" style="width: 100%;height:100%;">
    <!-- <Dingbu :nameTitle="PageName"></Dingbu> -->
    <div class="content">
        <div class="meljTitle">
            <Button type="success" @click="addFull" style="float: left;margin-left: 15px;">+ 添加活动</Button>
        </div>
        <div class="meljContent sw">
            <Form :label-width="50" :inline="true" ref="formData" v-for="(item,index) in formData" :key="index">
                <FormItem label="满">
                    <Input :value="item.price" disabled style="width:200px;"/>
                    <span style="font-size:16px;">元</span>
                </FormItem>
                <FormItem label="减">
                    <Input :value="item.cut" disabled style="width:200px;"/>
                    <span style="font-size:16px;">元</span>
                </FormItem>
                <FormItem>
                  <Poptip confirm title="确定要删除吗？" @on-ok="okDel(item.id, index)" @on-cancel="cancelDel">
                    <Button type="error" >删除</Button>
                  </Poptip>
                </FormItem>
            </Form>
        </div>
    </div>
    <!-- 添加活动 -->
    <Modal v-model="modal1" title="添加活动" @on-ok="okAdd">
      <Form :model="formItem" :label-width="50" :rules="ruleValidate" ref="formItem">
        <FormItem label="满" prop="price">
          <Input v-model="formItem.price" style="width:100%;"/>
        </FormItem>
        <FormItem label="减" prop="cut">
          <Input v-model="formItem.cut"/>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import Dingbu from "../header/dingbu.vue";
import { mapGetters, mapMutations, mapActions } from "vuex";
import Base from "../../common/Base";
import { full_list, add_full, del_full } from "../../api/store/store.js";
var idTmr;
export default {
  mixins: [Base],
  data() {
    return {
      PageName: "满额立减",
      modal1: false,
      formData: [],
      formItem: {
        price: "",
        cut: ""
      },
      ruleValidate: {
        price: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        cut: [{ required: true, message: "请输入商品价格", trigger: "blur" }]
      }
    };
  },
  mounted() {},
  created() {
    this.getData();
  },
  components: {
    Dingbu
  },
  methods: {
    addFull() {
      this.modal1 = true;
      this.formItem.price = '';
      this.formItem.cut = '';
    },
    okAdd() {
      add_full(Object.assign(
        {},
        {token: 1},
        this.formItem
      )).then(res => {
        this.$Message.success("添加成功！")
        this.formData.push(this.formItem)
      });
    },
    okDel(id, index) {
      del_full({ id: id }).then(res => {
        this.formData.splice(index, 1);
        this.$Message.success("删除成功！");
      });
    },
    cancelDel() {},
    getData() {
      full_list({}).then(res => {
        console.log(res);
        this.formData = res.data;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../css/common.scss";
</style>